import React from "react";
import {
  ListView,
  WhiteSpace,
  NavBar,
  SearchBar,
  Icon,
  Radio
} from "antd-mobile";
import { navigate } from "gatsby";
import deviceList from "../../services/task/device-list.json";
const RadioItem = Radio.RadioItem;

const NUM_ROWS = 20;
let pageIndex = 0;

function genData(pIndex = 0) {
  const dataBlob = {};
  for (let i = 0; i < NUM_ROWS; i++) {
    const ii = pIndex * NUM_ROWS + i;
    dataBlob[`${ii}`] = `row - ${ii}`;
  }
  return dataBlob;
}

class DeviceList extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    });

    this.state = {
      dataSource,
      isLoading: true,
      datas: deviceList,
      searchValue: "",
      value: ""
    };
    this.search = this.search.bind(this);
    this.cancel = this.cancel.bind(this);
  }

  search(e) {
    this.setState({
      datas: deviceList.rows.filter(item => item.name.indexOf(e) !== -1)
    });
  }
  cancel(e) {
    this.refs.search.state.value = "";
    this.search("");
  }

  componentDidMount() {
    // you can scroll to the specified position
    // setTimeout(() => this.lv.scrollTo(0, 120), 800);

    // simulate initial Ajax
    // setTimeout(() => {
    this.rData = genData();
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.rData),
      isLoading: false
    });
    // }, 0);
  }

  onEndReached = event => {
    // load new data
    // hasMore: from backend data, indicates whether it is the last page, here is false
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    this.setState({ isLoading: true });
    setTimeout(() => {
      this.rData = { ...this.rData, ...genData(++pageIndex) };
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false
      });
    }, 1000);
  };

  onChange = value => {
    console.log("checkbox,",value);
    this.setState({
      value
    });
  };

  render() {
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: "#F5F5F9",
          height: 0
        }}
      />
    );
    // console.log(this.state.datas)
    let index = 0;
    let listContent = null;

    const row = (rowData, sectionID, rowID) => {
      if (index < 0) {
        index = 0;
      }
      const obj = this.state.datas[index++];

      return (
        <RadioItem
          key={obj}
          checked={this.state.value === obj}
          onChange={() => this.onChange(obj)}
        >
          {obj}
        </RadioItem>
      );
    };
    if (this.state.datas.length > 0) {
      listContent = (
        <div className="page-content has-search">
          <WhiteSpace size="md" />
          <ListView
            ref={el => (this.lv = el)}
            dataSource={this.state.dataSource}
            renderFooter={() => (
              <div style={{ padding: 30, textAlign: "center" }}>
                {this.state.isLoading ? "Loading..." : "Loaded"}
              </div>
            )}
            renderRow={row}
            renderSeparator={separator}
            className="am-list"
            pageSize={15}
            initialListSize={15}
            useBodyScroll
            scrollRenderAheadDistance={500}
            onEndReached={this.onEndReached}
            onEndReachedThreshold={10}
          />
        </div>
      );
    }
    return (
      <div>
        <div className="fixd-header">
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={e => {
              navigate(this.props.location.state.url);
            }}
          >
            巡查任务
          </NavBar>
          <SearchBar
            placeholder="Search"
            maxLength={20}
            onSubmit={this.search}
            onCancel={this.cancel}
            ref="search"
          />
        </div>
        {listContent}
        <style jsx="true">{`
          .am-list-body {
            background-color: #f5f5f9;
          }
          .task-item div {
            color: #fe5741;
            line-height: 2.7rem;
          }
          .task-item div span {
            color: #888;
          }
          .task-item img {
            width: 4.9rem;
            height: 4.9rem;
            position: absolute;
            right: 0;
            top: 0;
          }
          .task-item a {
            color: #888;
            position: absolute;
            right: 1rem;
            bottom: 1rem;
          }
          .am-wingblank.am-wingblank-lg {
            background-color: #fff;
            position: relative;
            padding: 0.5rem 1rem;
          }
          .am-list-body::before {
            height: 0 !important;
          }
        `}</style>
      </div>
    );
  }
}

export default DeviceList;
